import { View, Text, StyleSheet, Image, Pressable } from "react-native";
import React from "react";
import { AntDesign } from "@expo/vector-icons";
import { useNavigation } from "@react-navigation/native";
import { TouchableOpacity } from "react-native-gesture-handler";
import { useGetStoreString } from "../hooks/useStorage";

export default function Head() {
  const navigation = useNavigation();

  const handleToMine = async () => {
    const token = await useGetStoreString("token");
    navigation.navigate(token ? "Mine" : "Login");
  };

  return (
    <View style={style.head}>
      <View style={style.viewsParallel}>
        <TouchableOpacity
          activeOpacity={0.8}
          onPress={() => navigation.navigate("Goods")}
        >
          <AntDesign
            style={style.iconsLeft}
            name="bars"
            size={24}
            color="black"
          />
        </TouchableOpacity>
        <AntDesign
          style={style.iconsLeft}
          name="customerservice"
          size={22}
          color="black"
        />
      </View>
      <TouchableOpacity
        activeOpacity={0.8}
        onPress={() => navigation.navigate("Home")}
      >
        <Image
          style={style.headImg}
          source={{
            uri: "https://cdn.bestseller.com.cn/assets/h5/ONLY/image/logo-rect.png",
          }}
        />
      </TouchableOpacity>

      <View style={style.viewsParallel}>
        <AntDesign
          style={style.iconsRight}
          name="shoppingcart"
          size={24}
          color="black"
        />

        <TouchableOpacity activeOpacity={0.8} onPress={handleToMine}>
          <AntDesign
            style={style.iconsRight}
            name="user"
            size={22}
            color="black"
          />
        </TouchableOpacity>
      </View>
    </View>
  );
}

const style = StyleSheet.create({
  head: {
    width: "100%",
    height: 50,
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    backgroundColor: "#fff",
  },
  viewsParallel: {
    justifyContent: "center",
    flexDirection: "row",
    alignItems: "center",
  },
  iconsLeft: {
    marginLeft: 8,
  },
  iconsRight: {
    marginRight: 8,
  },
  headImg: {
    width: 100,
    height: 30,
  },
});
